import * as echarts from "echarts";
/**
 * getChart
 * 用于渲染
 * @param {*} myChart 初始化dom
 * @param {Array} dataArr 传入渲染数据的数组
 * @param {String} color 传入的渐变颜色 默认值为#188df0
 */
export function getChart(myChart, dataArr, color = "#188df0") {
  // 绘制图表
  const option = {
    xAxis: {
      data: ["9日", "10日", "11日", "12日", "13日", "14日", "15日"],
    },
    yAxis: {},
    series: [
      {
        name: "销量",
        //类型为柱状图
        type: "bar",
        data: dataArr,
        //barWidth 控制柱条宽度
        barWidth: "20%",
        // 设置数据显示位置
        label: {
          show: true,
          position: "top",
        },
        itemStyle: {
          //设置柱状图的圆角
          borderRadius: 30,
          //(右 下 左 上),渐变方向
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            //0开始颜色 1结束颜色
            { offset: 0, color: "#fff" },
            { offset: 1, color: color },
          ]),
        },
      },
    ],
  };
  myChart.setOption(option);
}

/**
 * getPie
 * 饼状图生成函数,接收一个参数为dom值
 * @param {*} myChart 初始化dom
 */
export function getPie(myChart) {
  const option = {
    //设置显示中间
    title: {
      text: "下单转化率16%",
      top: "center",
      left: "center",
      textStyle: {
        fontSize: "14",
      },
    },

    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "1%",
      left: "center",
    },
    color: ["#5236B5", "#EAEBEC"],
    series: [
      {
        name: "转化率百分比",
        type: "pie",
        //饼图
        //它是一个数组时，它的前一项表示内半径，后一项表示外半径，这样就形成了一个圆环图
        radius: ["56%", "70%"],
        avoidLabelOverlap: false,
        label: {
          show: true,
          position: "center",
        },
        emphasis: {
          label: {
            show: false,
            fontSize: "12",
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: [{ value: 300 }, { value: 1000 }],
      },
    ],
  };
  myChart.setOption(option);
}

/**
 * lineChart
 * 折线图生成函数,三个参数
 * 第一个参数是dom节点
 * 第二个参数是想显示的文本标题
 * 第三个参数是渐变颜色
 * @param {*} myChart 初始化dom
 * @param {*} title 传入文本标题
 * @param {*} color 颜色参数
 */
export function lineChart(
  myChart,
  title1 = "今日入库商品",
  title2 = "500件",
  dataArr,
  color = "blue"
) {
  const option = {
    title: {
      text: title1,
      textStyle: {
        fontSize: 12,
        fontWeight: 100,
      },
      top: "5%",
      left: "8%",
      subtext: title2,
      subtextStyle: {
        fontSize: 18,
        fontWeight: 700,
      },
    },
    xAxis: {
      data: ["", "", "", "", ""],
    },
    yAxis: {},
    tooltip: {
      trigger: "axis", //触发坐标
      axisPointer: {
        type: "line",
      },
    },
    series: [
      {
        data: dataArr,
        type: "line",
        areaStyle: {},
        itemStyle: {
          //(右 下 左 上),渐变方向
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            //0开始颜色 1结束颜色
            { offset: 0, color: "#fff" },
            { offset: 1, color: color },
          ]),
        },
        symbol: "none",
      },
    ],
  };

  myChart.setOption(option);
}

/**
 * doubleLineChart
 * 双层折线图
 * @param {*} myChart 初始化dom
 */
export function doubleLineChart(myChart) {
  const option = {
    title: {
      text: "数据概况",
      textStyle: {
        fontSize: 14,
      },
      left: 20,
      top: 20,
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["all", "new"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: [
        "",
        "4日",
        "5日",
        "6日",
        "7日",
        "8日",
        "9日",
        "10日",
        "11日",
        "12日",
        "13日",
        "14日",
        "15日",
      ],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "all",
        type: "line",
        stack: "Total",
        data: ["", 5, 10, 5, 20, 25, 30, 15, 12, 10, 20, 12, 18],
      },
      {
        name: "new",
        type: "line",
        stack: "Total",
        data: ["", 10, 6, 15, 20, 12, 30, 22, 28, 10, 30, 35, 18],
      },
    ],
  };
  myChart.setOption(option);
}

/**
 * doubleLineArea
 * 折线图带区域面积
 * @param {*} myChart 初始化dom
 */
export function doubleLineArea(myChart) {
  const option = {
    title: {
      text: "数据概况",
      textStyle: {
        fontSize: 14,
      },
      left: 20,
      top: 20,
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["all", "new"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: [
        "",
        "4日",
        "5日",
        "6日",
        "7日",
        "8日",
        "9日",
        "10日",
        "11日",
        "12日",
        "13日",
        "14日",
        "15日",
      ],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "all",
        type: "line",
        areaStyle: {},
        stack: "Total",
        data: ["", 5, 10, 5, 20, 25, 30, 15, 12, 10, 20, 12, 18],
        itemStyle: {
          //(右 下 左 上),渐变方向
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            //0开始颜色 1结束颜色
            { offset: 0, color: "#fff" },
            { offset: 1, color: "blue" },
          ]),
        },
      },
      {
        name: "new",
        type: "line",
        areaStyle: {},
        stack: "Total",
        data: ["", 10, 6, 15, 20, 12, 30, 22, 28, 10, 30, 35, 18],
        itemStyle: {
          //(右 下 左 上),渐变方向
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            //0开始颜色 1结束颜色
            { offset: 0, color: "#fff" },
            { offset: 1, color: "orange" },
          ]),
        },
      },
    ],
  };
  myChart.setOption(option);
}
